{% extends "base.html" %}

{% block title %}点名统计{% endblock %}
{% block page_title %}点名记录统计{% endblock %}

{% block extra_css %}
<style>
    .stats-card {
        border-left: 4px solid var(--primary);
    }
    
    .tab-content {
        padding: 20px;
        background-color: white;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .badge-stat {
        font-size: 0.9rem;
        padding: 0.5em 0.8em;
    }
</style>
{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header">
        <i class="fas fa-filter me-2"></i>筛选条件
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">班级筛选</label>
                <select class="form-select" id="class-filter">
                    <option value="all">全部班级</option>
                    {% for class_name in classes %}
                    <option value="{{ class_name }}">{{ class_name }}班</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-4">
                <label class="form-label">日期范围</label>
                <div class="input-group">
                    <input type="date" class="form-control" id="date-from">
                    <span class="input-group-text">至</span>
                    <input type="date" class="form-control" id="date-to">
                </div>
            </div>
            
            <div class="col-md-4">
                <label class="form-label">学生筛选</label>
                <input type="text" class="form-control" id="student-filter" placeholder="输入学生姓名">
            </div>
        </div>
        <div class="mt-3 text-end">
            <button class="btn btn-primary" id="filter-btn">
                <i class="fas fa-filter me-1"></i>应用筛选
            </button>
        </div>
    </div>
</div>

<ul class="nav nav-tabs" id="statTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#class-tab">
            按班级统计
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#date-tab">
            按日期统计
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#student-tab">
            按学生统计
        </button>
    </li>
    <!-- 其他标签页... -->
</ul>

<div class="tab-content" id="statTabContent">
    <div class="tab-pane fade show active" id="class-tab">
        <!-- 按班级统计内容 -->
    </div>
    
    <div class="tab-pane fade" id="date-tab">
        <!-- 按日期统计内容 -->
    </div>
    
    <div class="tab-pane fade" id="student-tab">
        <!-- 按学生统计内容 -->
    </div>
    <!-- 其他标签页内容... -->
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 初始化标签页
    const statTabs = new bootstrap.Tab('#statTabs');
    
    // 筛选功能
    document.getElementById('filter-btn').addEventListener('click', applyFilters);
    
    function applyFilters() {
        // 实现筛选逻辑
    }
</script>
{% endblock %}